import QtQuick 2.0
import "components"

Rectangle {
    id: window
    width: 480
    height: 800
    property double shadow: 0.0
    property string text2: "<span><img src='http://farm6.static.flickr.com/5253/5504703613_5dd74fe1e5.jpg' width=460 />" +
                           "<img src='http://farm3.static.flickr.com/2425/3758198226_21b9c4c92b.jpg' width=230 style='float:right; padding:20px' />" +
                           "<h3>My Camera N900</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies pulvinar ante et condimentum. Curabitur vel feugiat ligula. Vivamus sodales ipsum sed risus bibendum sit amet bibendum diam luctus. Praesent fermentum iaculis ante nec ornare. Sed hendrerit mauris vel tortor tempor sagittis. Integer tincidunt mauris vitae elit luctus ullamcorper. Cras et massa ultrices nisi pellentesque posuere. Curabitur quis diam eu felis hendrerit faucibus.</p>" +
                           "<p>Fusce facilisis, nisi a hendrerit lobortis, augue ipsum sodales enim, tristique hendrerit metus enim non risus. Suspendisse odio urna, egestas vitae interdum et, vestibulum at tortor. Nulla facilisi. In hac habitasse platea dictumst. Class aptent taciti sociosqu.</p></span>"
    property string text1: "<span><img style='float:left' width='460' src='http://farm1.static.flickr.com/166/430980641_a635c4ab8c.jpg' />" +
                           "<h3>Kasvopus 0.9.2 Released</h3>" +
                           "<span style='color:#555'>Posted on Thursday, March 10, 2011 by Tommi Laukkanen</span>" +
                           "<p>Didn’t expect my Kasvopus app to get that much attention when I released it on last Saturday. There are already over two thousand users according to Facebook app statistics. So maybe I wasn’t alone in need of Facebook app for the Maemo and Symbian devices.</p>" +
                           "<p>Previous version (0.9.2) was more like a alpha preview (and so is 0.9.3) to get some feedback from the users. There are now over hundred comments on the Kasvopus app page. Most of them are related to installation and authentication problems. Hopefully the Qt 4.7.2 will be included in the future firmware updates so that wouldn’t need users to install development versions of the Qt libraries.</p>" +
                           "<p>Kasvopus uses WebView component for the authentication and it seems that N900 didn’t render the authentication pages in the same way as e.g. N8. So in this new version I changed the authentication page to use Facebook login page’s “wap” version which hopefully now shows the “Authenticate” button to all users and devices.</p></span>"

    Item {
        width: window.width / 2
        height: window.height
        clip: true
        Page {
            width: window.width - 20
            shadow: window.shadow
            text: window.text1
        }
    }
    Item {
        width: window.width / 2
        height: window.height
        x: window.width / 2
        clip: true
        Page {
            width: window.width - 20
            x: -window.width/2 + 10
            text: window.text2
            shadow: window.shadow
        }
    }

    Item {
        id: pageClipper
        clip: true
        width: parent.width/2
        x: parent.width / 2
        height: parent.height

        /*Page {
            shadow: window.shadow
        }*/

        Flipable {
            id: page
            x: -window.width/2
            width: window.width
            height: window.height
            property bool flipped: false
            front: Page { id: frontPage; shadow: window.shadow*4; text: window.text1 }
            back: Page { id: backPage; shadow: window.shadow*4; text: window.text2 }

            transform: [
                Rotation {
                    id: detailsFlipableRotation
                    origin.x: window.width/2
                    origin.y: window.height/2
                    axis.x: 0; axis.y: 1; axis.z: 0     // set axis.y to 1 to rotate around y-axis
                    angle: 0 // the default angle
                }
            ]

            states: State {
                name: "back"
                PropertyChanges { target: detailsFlipableRotation; angle: -180 }
                when: page.flipped
            }

            transitions: Transition {
                ParallelAnimation {
                    NumberAnimation { target: detailsFlipableRotation; property: "angle"; duration: 2000; easing.type: "InOutCubic" }
                    NumberAnimation { target: window; property: "shadow"; from: 0.0; to: 0.2; duration: 1000; easing.type: "InCubic" }
                    SequentialAnimation {
                        PauseAnimation { duration: 1000 }
                        ScriptAction {
                            script: {
                                if(pageClipper.x!=0) {
                                    pageClipper.x = 0;
                                    page.x = 0;
                                } else {
                                    pageClipper.x = window.width/2;
                                    page.x = -window.width/2;
                                }
                            }
                        }
                        ParallelAnimation {
                            NumberAnimation { target: window; property: "shadow"; from: 0.2; to: 0.0; duration: 1000; easing.type: "OutCubic" }
                        }
                    }
                }
            }
        }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            page.flipped = !page.flipped;
        }
    }
}
